import { Button, Drawer, Upload } from 'antd'
import { useEffect, useState } from 'react';
import { PlusOutlined, EditOutlined } from '@ant-design/icons';
import style from './style.module.less'
import { RcFile } from 'antd/lib/upload/interface';
import { getArticle } from '../../services/api';

function getBase64(img: File, callback: { (imageUrl: string): void; (arg0: string | ArrayBuffer | null): any; }) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}
interface Props {
    getBanner?: (banner: string[]) => void
    id?: string
}
export default function Banner(props: Props) {
    const [banner, setBanner] = useState<string[]>([])
    const [fileList, setFileList] = useState<any[]>([])
    const [defaultFileList, setDefaultFileList] = useState<any[]>([])
    //更新banner
    useEffect(() => {
        if (props.getBanner)
            props.getBanner(banner)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [banner])
    //初始化
    useEffect(() => {
        if (props.id)
        getArticle(props.id).then((res) => {
            // eslint-disable-next-line @typescript-eslint/no-array-constructor
            let ban = new Array()
            if (res.data) {
                let banners=res.data.info.banner
                setBanner(banners)
                banners.forEach((item, index) => {
                    ban.push({
                        uid: index,
                        name: ' ',
                        status: 'done',
                        url: item,
                    })
                })
                setFileList(fileList.concat(ban))
                setDefaultFileList(ban)
            }
        })
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props.id])
    const [visible, setVisible] = useState(false);
    const showDrawer = () => {
        setVisible(true);
    };
    const onClose = () => {
        setVisible(false);
    };
    const onRemove = (file: any) => {
        const index = fileList.indexOf(file);
        const newFileList = fileList.slice();
        const newBanner = banner.slice();
        newFileList.splice(index, 1);
        newBanner.splice(index, 1);
        setFileList(newFileList);
        setBanner(newBanner)
    }
    const beforeUpload = (file: RcFile) => {
        getBase64(file, imageUrl => {
            if (imageUrl)
                setBanner([...banner, String(imageUrl)])
        })
        setFileList([...fileList, file])
        return false;
    }

    return (
        <div className={style.drawer}>
            <Button type="primary" onClick={showDrawer}>
                <EditOutlined />横幅
            </Button>
            <Drawer
                title="添加或修改横幅"
                placement="right"
                closable={false}
                onClose={onClose}
                visible={visible}
            >
                <Upload
                    onRemove={onRemove}
                    beforeUpload={beforeUpload}
                    listType="picture"
                    defaultFileList={defaultFileList}
                    showUploadList={true}
                    accept='.png,.jpg,.svg'
                    maxCount={3}
                    className="upload-list-inline">
                    <Button icon={<PlusOutlined />}>添加(最大数量:3)</Button>
                </Upload>
            </Drawer>
        </div>
    )
}